<template>
  <div class="admin-dashboard">
    <el-row :gutter="20">
      <!-- 数据概览卡片 -->
      <el-col :span="6" v-for="(item, index) in statistics" :key="index">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-icon">
            <i :class="item.icon"></i>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ item.value }}</div>
            <div class="stat-label">{{ item.label }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>预约趋势</span>
          </div>
          <div style="height: 300px;">
            <!-- 这里可以集成 ECharts 图表 -->
            图表区域1
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>自习室使用率</span>
          </div>
          <div style="height: 300px;">
            <!-- 这里可以集成 ECharts 图表 -->
            图表区域2
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最近活动 -->
    <el-card style="margin-top: 20px;">
      <div slot="header">
        <span>最近活动</span>
      </div>
      <el-table :data="activities" style="width: 100%">
        <el-table-column prop="time" label="时间" width="180"/>
        <el-table-column prop="user" label="用户" width="180"/>
        <el-table-column prop="action" label="操作"/>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 'success' ? 'success' : 'danger'">
              {{ scope.row.status === 'success' ? '成功' : '失败' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'AdminDashboard',
  data() {
    return {
      statistics: [
        {
          icon: 'el-icon-user',
          value: '1,234',
          label: '总用户数'
        },
        {
          icon: 'el-icon-s-order',
          value: '456',
          label: '今日预约'
        },
        {
          icon: 'el-icon-office-building',
          value: '89%',
          label: '使用率'
        },
        {
          icon: 'el-icon-money',
          value: '￥12,345',
          label: '本月收入'
        }
      ],
      activities: [
        {
          time: '2024-03-20 10:00:00',
          user: '张三',
          action: '预约了阳光自习室',
          status: 'success'
        },
        {
          time: '2024-03-20 09:30:00',
          user: '李四',
          action: '取消了预约',
          status: 'success'
        },
        {
          time: '2024-03-20 09:00:00',
          user: '王五',
          action: '支付预约费用',
          status: 'success'
        }
      ]
    }
  }
}
</script>

<style scoped>
.admin-dashboard {
  padding: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
}

.stat-icon {
  font-size: 48px;
  color: #409EFF;
  margin-right: 20px;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}
</style> 